<template>
  <div class="func-comp-form">

    <!--<Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置" :style="{padding: '10px'}">

        <Form :label-width="100">
          <FormItem label="装饰">
            <div class="border-img-card"
                 style="padding-bottom: 0px; margin-top: 3px; cursor: pointer;" @click="modalVisible = !modalVisible">
              <img :src="require('./images/'+imageName)"/>
            </div>
          </FormItem>
          <FormItem label="透明度">
            <Slider v-model="opacity" :max="1" :min="0" :step="0.1"></Slider>
          </FormItem>
        </Form>

      </TabPane>
    </Tabs>

    <Drawer
        title="选择装饰"
        v-model="modalVisible"
        width="330"
        :mask-closable="true">

      <Row :gutter="10">
        <i-col span="12" v-for="(di, index) in decorateImages" :key="index">
          <div class="border-img-card"
               :class="{'active' : imageName == di.value}" @click="imgCardClickHandle(di.value)">
            <img :src="require('./images/'+di.value)" />
          </div>
          <div style="margin-bottom: 10px;"></div>
        </i-col>
      </Row>

    </Drawer>-->

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'DecorateCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        modalVisible: false,

        decorateImages: [
          {value: 'decorate-1.png'},
          {value: 'decorate-2.png'},
          {value: 'decorate-3.png'},
          {value: 'decorate-4.png'},
          {value: 'decorate-5.png'},
          {value: 'decorate-6.png'},
          {value: 'decorate-7.png'},
          {value: 'decorate-8.png'},
          {value: 'decorate-9.png'},
          {value: 'decorate-10.png'},
          {value: 'decorate-11.png'},
          {value: 'decorate-12.png'},
          {value: 'decorate-13.png'},
          {value: 'decorate-14.png'},
          {value: 'decorate-15.gif'},
          {value: 'decorate-16.png'},
          {value: 'decorate-17.png'},
          {value: 'decorate-18.png'},
          {value: 'decorate-19.png'},
          {value: 'decorate-20.png'},
          {value: 'decorate-21.png'},
          {value: 'decorate-22.png'},
          {value: 'decorate-23.png'},
          {value: 'decorate-24.png'},
          {value: 'decorate-25.png'},
          {value: 'decorate-26.png'},
          {value: 'decorate-27.png'},
          {value: 'decorate-28.gif'},
          {value: 'decorate-29.png'},
          {value: 'decorate-30.png'},
          {value: 'decorate-31.png'},
          {value: 'decorate-32.png'},
          {value: 'decorate-33.png'},
          {value: 'decorate-34.gif'},
          {value: 'decorate-35.gif'},
          {value: 'decorate-36.png'},
          {value: 'decorate-37.png'},
          {value: 'decorate-38.png'},
          {value: 'decorate-39.png'},
          {value: 'decorate-40.gif'},
          {value: 'decorate-41.png'},
          {value: 'decorate-42.png'},
          {value: 'decorate-43.gif'},
          {value: 'decorate-44.png'},
          {value: 'decorate-45.png'},
          {value: 'decorate-46.gif'},
          {value: 'decorate-47.gif'},
          {value: 'decorate-48.gif'},
          {value: 'decorate-49.png'},
          {value: 'decorate-50.png'},
          {value: 'decorate-51.gif'},
          {value: 'decorate-52.png'},
          {value: 'decorate-53.png'},
          {value: 'decorate-54.png'},
          {value: 'decorate-55.png'},
        ]
      }
    },
    mounted() {

    },
    methods: {
      imgCardClickHandle (imageName) {
        this.updateField('component.compConfigData.imageName', imageName);
      }
    },
    computed: {
      ...mapFields({

        imageName: 'component.compConfigData.imageName',
        opacity: 'component.compConfigData.opacity',

      })
    }
  }
</script>

<style lang="less" scoped>
  .border-img-card {
    width: 100%;
    height: auto;
    background-color: #212121;
    border: 3px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    &.active {
      border-color: #29b6f6;
      box-shadow: 0 0 10px #000;
    }
    img {
      max-width: 100%;
      height: 60px;
    }
  }
</style>
